<script lang="ts" name="App" setup>
import { RouterView,RouterLink } from "vue-router";

/*
* 两个注意点
*<Demo />亲手写标签出来的 放 components文件夹里
*  ====>一般组件..靠路由渲染出来的=====>路由组件放 view文件中
*
* 通过点击导航,视觉上消失的组件,其实是被卸载掉了
*
*==============================>路由器的工作模式
* history模式
*   vue2: mode: 'history'
*   vue3: history: createWebHistory()
*   React: BrowserRouter
*
* 优点: url更加美观 没带 '#',更接近传统网站
* 缺点: 后期项目上线,需要服务端配合处理路径问题,否则刷新会有404
*
*
*
* hash模式
* vue3: createWebHashHistory
* 优点: 兼容性更好,不需要服务器处理路径
* 缺点: 带有 '#',且seo优化差
* seo
*   搜索引擎优化
*
* */
</script>

<template>
  <div class="app">
    <h2>vue路由测试</h2>
    <!--   导航区-->
    <div class="navigate">
      <RouterLink :to="{name: 'zhuye'}" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink :to="{path: '/about'}" active-class="active">关于</RouterLink>
    </div>
    <!--  展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
a {
  color: skyblue;
}
a.active {
  color: red !important;
  border: none;
}
</style>